<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="setVisible('新增')"
                        >
                            <icon-plus class="mr6" />
                            {{ $t('basics.add') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content mt10">
                <div class="container-content-table">
                    <a-table
                        :columns="state.columns"
                        :data="state.list"
                        :loading="state.loading"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #operate="{ record }">
                            <div class="flex">
                                <a-link
                                    class="mr6"
                                    @click="setVisible('修改', record)"
                                    >修改</a-link
                                >
                                <a-link
                                    status="danger"
                                    @click="deleteRows(record)"
                                    >删除</a-link
                                >
                            </div>
                        </template>
                    </a-table>
                    <!-- <div class="_crud-footer mt-3 text-right" ref="crudFooterRef">
                    <a-pagination
                        :total="pageList.total"
                        show-total
                        show-jumper
                        show-page-size
                        @page-size-change="getList"
                        @change="getList"
                        v-model:current="form.page"
                        v-model:page-size="form.pageSize"
                        style="display: inline-flex"
                        :page-size-options="[10, 20, 50, 100]"
                        :default-page-size="100"
                    />
                </div> -->
                </div>
            </div>
            <a-modal
                v-model:visible="dialog.visible"
                :render-to-body="false"
                :footer="false"
            >
                <template #title> {{ dialog.title }} </template>
                <a-form
                    :model="dialog.modalForm"
                    ref="modelRef"
                    :rules="dialog.modalRules"
                >
                    <a-form-item
                        field="theme_name"
                        label="主题名称"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="dialog.modalForm.theme_name"
                            placeholder="主题名称"
                        />
                    </a-form-item>
                    <a-form-item
                        field="theme_key"
                        label="主题key"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="dialog.modalForm.theme_key"
                            placeholder="主题key"
                        />
                    </a-form-item>
                    <a-form-item
                        field="backend_setting"
                        label="主题样式"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="dialog.modalForm.backend_setting"
                            placeholder="主题样式"
                        />
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button class="mr20 c0" @click="modalCancel">{{
                        $t('basics.concel')
                    }}</a-button>
                    <a-button
                        class="mr20"
                        type="primary"
                        @click="modalConfirm(state.rows.id)"
                        >{{ $t('basics.sure') }}</a-button
                    >
                </div>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { $request } from '@/utils/request';
import { useI18n } from 'vue-i18n';

const { proxy } = getCurrentInstance();
const { t } = useI18n();

const state = reactive({
    list: [],
    loading: false,
    rows: {},
    columns: [
        {
            title: '主题名称',
            dataIndex: 'theme_name',
            width: 120
        },
        {
            title: '主题样式',
            dataIndex: 'backend_setting'
        },
        {
            title: t('basics.controls'),
            dataIndex: 'operate',
            slotName: 'operate',
            width: 120
        }
    ]
});

const dialog = reactive({
    title: '新增',
    visible: false,
    modalForm: {},
    modalRules: {}
});

const setVisible = (title, rows) => {
    proxy.$refs['modelRef'].resetFields();
    if (rows) {
        state.rows = rows;
        dialog.modalForm = { ...rows };
    }
    dialog.title = title;
    dialog.visible = true;
};

const modalConfirm = async (id) => {
    let params = {
        ...dialog.modalForm,
        backend_setting:
            typeof dialog.modalForm.backend_setting === 'string'
                ? JSON.parse(dialog.modalForm.backend_setting)
                : dialog.modalForm.backend_setting
    };
    console.log(params);
    params.id = id;
    let url =
        dialog.title === '新增' ? '/cloud/theme/add' : '/cloud/theme/update';
    await $request.post(url, params);
    dialog.visible = false;
    proxy.$message.success(`${dialog.title}成功`);
    initPage();
};

const modalCancel = () => {
    dialog.visible = false;
};

const deleteRows = ({ id }) => {
    proxy.$modal.warning({
        title: '删除',
        content: '是否确定删除？',
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: async () => {
            await $request.post('/cloud/theme/delete', { id });
            proxy.$message.success('删除成功');
            initPage();
        }
    });
};

const getTableData = () => {
    $request.get('/cloud/theme/getAll').then((res) => {
        state.list = res.map((n) => {
            return {
                ...n,
                backend_setting: JSON.stringify(n.backend_setting)
            };
        });
    });
};

const initPage = () => {
    getTableData();
};

initPage();
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
